<template>
  <view class="login_container app_container_page">
    <view class="logo"> </view>
    <view class="form">
      <van-cell-group>
        <van-field class="telCell" maxlength="11" :value="tel" @change="telChange" placeholder-style="font-size: 28rpx;color:#333;" placeholder="请输入手机号" />
        <van-field center maxlength="6" placeholder-style="font-size: 28rpx;color:#333;" placeholder="请输入验证码" use-button-slot @change="codeChange">
          <button :disabled="isSend" slot="button" class="codeBtn" @click="toSendCode" :plain="true">
            {{ sendCodeText }}
          </button>
        </van-field>
      </van-cell-group>
      <view style="margin-top: 35rpx">
        <van-checkbox class="readme" :value="checked" @change="onChange"> 我已阅读并同意<text @click.stop="toread" style="color: #6e5017">《儿童体质监测》</text>服务条款 </van-checkbox>
      </view>
    </view>
    <van-button class="loginBtn" type="default" @click="handleLogin">登录</van-button>
  </view>
</template>

<script>
import { getSms, getlogin } from '@/api/user'
import checker from '@/util/checker.js'
export default {
  data() {
    return {
      tel: '',
      phone: '',
      code: '',
      uuid: '',
      sendCodeText: '获取验证码',
      timeNum: 60,
      isSend: false,
      checked: false,
      //
      pending: false
    }
  },
  methods: {
    // 跳转到条款
    toread() {
      console.log('条款')
    },
    onChange(e) {
      this.checked = e.detail
    },
    telChange(e) {
      this.phone = e.detail
    },
    codeChange(e) {
      this.code = e.detail
      // if (!this.checked) {
      //   uni.showToast({
      //     icon: 'none',
      //     title: '请先同意《儿童体质监测》服务条款'
      //   })
      // } else {
      //   if (this.isSend) {
      //     if (this.code.length === 6) {
      //       console.log('获取接口')
      //     }
      //   } else {
      //     uni.showToast({
      //       icon: 'none',
      //       title: '请先获取验证码'
      //     })
      //   }
      // }
    },
    // 发送验证码
    async toSendCode() {
      const isPhone = /^1[3456789]\d{9}$/
      if (this.phone.length === 11) {
        if (!isPhone.test(this.phone)) {
          uni.showToast({
            icon: 'none',
            title: '手机号码格式不正确'
          })
          return
        }
      } else {
        uni.showToast({
          icon: 'none',
          title: '手机号码应为11位'
        })
        return
      }

      try {
        const res = await getSms({ mobile: this.phone })
        if (res.code === 200) {
          this.uuid = res.data.uuid
          uni.showToast({
            icon: 'none',
            title: '发送成功'
          })
        }
        console.log(res)

        // 正常代码
        this.setTimeFn()
      } catch (error) {
        console.log(error)
      }
    },
    // 发送验证码之后的倒计时
    setTimeFn() {
      this.isSend = true
      this.sendCodeText = '重新获取(' + this.timeNum + ')'
      this.timeNum -= 1
      if (this.timeNum === 0) {
        this.isSend = false
        this.timeNum = 60
        this.sendCodeText = '发送验证码'
      } else {
        setTimeout(() => {
          this.setTimeFn()
        }, 1000)
      }
    },
    async handleLogin() {
      //
      if (this.pending) return

      const rule = [
        { name: 'mobile', checkType: 'notnull', errorMsg: '手机号不能为空' },
        { name: 'mobile', checkType: 'reg', checkRule: /^1[3456789]\d{9}$/, errorMsg: '手机号格式不正确' },
        { name: 'code', checkType: 'notnull', errorMsg: '验证码不能为空' }
      ]

      if (
        !checker.check(
          {
            mobile: this.phone,
            code: this.code
          },
          rule
        )
      ) {
        return uni.showToast({
          icon: 'none',
          title: checker.error
        })
      }

      if (!this.checked) {
        return uni.showToast({
          icon: 'none',
          title: '请同意用户服务条款'
        })
      }

      this.pending = true

      try {
        const res = await getlogin({
          username: this.phone,
          code: this.code,
          uuid: this.uuid,
          // openId标识
          openId: this.$store.state.openId
        })
        if (res.code === 200) {
          // save token
          this.$store.commit('UPDATE_WXLOGINIFNO', {
            token: res.data.token
            //
          })

          const resTemp = await this.$uniPromisify.requestSubscribeMessage({
            tmplIds: ['k8gCDrpbm-0QoorufYdfsOW_Od3nSos6Rp-Mghy7mn8']
          })
          console.log(resTemp['k8gCDrpbm-0QoorufYdfsOW_Od3nSos6Rp-Mghy7mn8'])
          uni.navigateBack()
        }
      } catch (error) {
        console.log(error)
      }

      this.pending = false
    }
  }
}
</script>

<style lang="scss">
.login_container {
  width: 100%;
  height: 100%;
  background: $theme-color;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100rpx;
  .logo {
    width: 100%;
    height: 60%;
    background-image: url('#{$BASEURL}/appLogo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .form {
    width: 600rpx;
    display: flex;
    flex-direction: column;
    font-size: 40rpx;
    color: #010101;
    .van-checkbox__icon {
      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      background: #ffffff;
      border: 2rpx solid #000000;
      border-radius: 50%;
      .van-icon {
        font-weight: 900;
        font-size: 28rpx !important;
      }
    }
    .van-checkbox__icon--checked {
      color: #000;
      text-align: center;
    }
    .readme {
      font-size: 24rpx;
      color: #6e5017;
    }
    .telCell {
      .van-cell {
        margin-bottom: 20px;
      }
    }
    .codeBtn {
      width: 224rpx;
      height: 40rpx;
      line-height: 40rpx;
      padding: 0;
      font-size: 38rpx;
      color: #6e5017;
      border: none;
      background-color: $theme-color;
      // -webkit-tap-highlight-color: $theme-color;
      &[disabled] {
        color: rgba(110, 80, 23, 0.4);
      }
    }
    .van-cell__title {
      min-width: 160rpx !important;
      max-width: 160rpx !important;
      height: 40rpx;
      font-size: 40rpx;
      color: #010101;
    }
    .van-cell__value {
      font-size: 40rpx;
    }
    .van-cell {
      padding-left: 0;
      padding-right: 0;
      background: $theme-color;
      border-bottom: 1px solid #000000;
    }
  }
  .loginBtn {
    button {
      width: 400rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 40rpx;
      color: #ffffff;
      background: #0a64ff;
      border-radius: 50rpx;
      margin-top: 80rpx;
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>
